<template>
  <div class="bottom-view">
    <!--左边的-->
    <el-card class="view">
      <!--头部-->
      <template v-slot:header>
        <div>搜索关键词</div>
      </template>
      <!--内容-->
      <template>
        <div class="search-view">
          <div class="chart-warp">
            <div class="chart">
              <div class="title">搜索用户数</div>
              <div class="count">{{ picData.totalUser | numberFormat }}</div>
              <v-chart :option="getoption('userList', '所搜用户数')"></v-chart>
            </div>

            <div class="chart">
              <div class="title">搜索量</div>
              <div class="count">{{ picData.toatalCount | numberFormat }}</div>
              <v-chart :option="getoption('countList', '所搜量')"></v-chart>
            </div>
          </div>
          <div class="search-table">
            <el-table style="width: 100%" :data="searchData">
              <el-table-column prop="rankNo" label="排名"></el-table-column>
              <el-table-column prop="word" label="关键字"></el-table-column>
              <el-table-column prop="count" label="搜索数量"></el-table-column>
              <el-table-column prop="user" label="搜索用户数"></el-table-column>
              <el-table-column prop="rank" label="搜索占比"></el-table-column>
            </el-table>

            <el-pagination
              layout="prev, pager, next"
              :total="AllsearchData.length"
              :current-page="page"
              :page-size="pageSize"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </el-card>
    <!--右边的-->
    <el-card class="view">
      <!--头部-->
      <template v-slot:header>
        <div>分类销售排行</div>
        <!--单选-->
        <el-radio-group size="small" v-model="radioSelect">
          <el-radio-button label="品类"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
      </template>
      <!--内容-->
      <template>
        <div class="search-view">
          <v-chart :option="pieOption()"></v-chart>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "BottomView",
  data() {
    return {
      radioSelect: "商品",
      page: 1,
      pageSize: 5,
    };
  },
  computed: {
    ...mapState({
      searchWord: (state) => state.data.reportData.searchWord || [],
      saleRank: (state) => state.data.reportData.saleRank,
    }),
    AllsearchData() {
      let searchWord = this.searchWord.map((item) => {
        return {
          ...item,
          rank: ((item.user / item.count) * 100).toFixed(2) + "%",
        };
      });
      searchWord.sort((x, y) => {
        return x.count - y.count;
      });
      searchWord.forEach((item, index) => {
        item.rankNo = index + 1;
      });
      return searchWord;
    },
    searchData() {
      let { page, pageSize } = this;
      let res = this.AllsearchData.slice(
        (page - 1) * pageSize,
        page * pageSize
      );
      return res;
    },
    //计算图表所需要的数据
    picData() {
      let data = {
        userList: [],
        wordList: [],
        countList: [],
        totalUser: 0,
        toatalCount: 0,
      };
      this.AllsearchData.forEach((item) => {
        data.userList.push(item.user);
        data.wordList.push(item.word);
        data.countList.push(item.count);
        data.totalUser += item.user;
        data.toatalCount += item.count;
      });

      return data;
    },
    pieData() {
      let data = {
        category: [],
        goods: [],
      };
      if (!this.saleRank) return data;

      const {
        category: { axisX, data1 },
        goods: { axisX: axisX2, data1: data2 },
      } = this.saleRank;
      console.log(151, axisX);
      let total = data1.reduce((pre, val) => {
        return (pre += val);
      }, 0);
      data.category.total = total;

      data1.forEach((value, index) => {
        let precent = ((value / total) * 100).toFixed(2) + "%";
        data.category.push({
          name: axisX[index],
          lineName: axisX[index] + "|" + precent,
          precent,
          value,
        });
      });

      let total2 = data2.reduce((pre, val) => (pre += val), 0);
      data.goods.total = total2;
      data2.forEach((value, index) => {
        let precent = ((value / total2) * 100).toFixed(2) + "%";
        data.goods.push({
          precent,
          value,
          name: axisX2[index],
          lineName: axisX2[index] + "|" + precent,
        });
      });
      return data;
    },
  },
  methods: {
    getoption(listName, name) {
      return {
        xAxis: {
          data: this.picData.wordList,
        },
        yAxis: {
          show: false,
        },
        series: {
          name,
          type: "line",
          data: this.picData[listName],
          smooth: true,
          areaStyle: { color: "#c7e7ff" },
          itemStyle: { opacity: 0 },
          lineStyle: { color: "#5fbf" },
        },
      };
    },
    pieOption() {
      console.log(this.pieData);
      const text = this.radioSelect + '分布'
      let data =
        this.radioSelect == "商品" ? this.pieData.category : this.pieData.goods;
      return {
           // 标题
        title: [
          // 主标题
          {
            text, // 标题的名字
            // 设置标题的字体大小和颜色
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          },
          // 副标题
          {
            text: '累计订单量', // 副标题内容
            subtext: data.total, // 副标题中的子标题内容
            left: '34%', // 左边的距离
            top: '42%', // 上面的距离
            // 副标题的样式
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            // 副标题中的子标题的样式
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            },
            textAlign: 'center' // 标题的对齐方式
          }
        ],
        // 图例
        legend: {
          orient: 'vertical',
          top: 'center',
          left: '70%'
        },
        series: [
          {
            name: text,
            type: "pie",
            radius: ["300%", "50%"],
            center: ['35%', '50%'],
             avoidLabelOverlap: false,
             itemStyle: {
              // borderRadius: 10, // 干掉圆角的效果
              borderColor: '#fff', // 连接空白的颜色
              borderWidth: 2 // 连接的地方的空白的宽度
            },
            center: ['35%', '50%'],
            label: {
              show: true,
              position: "outside",
              formatter:function(params){
                // console.log(params)
                return params.data.name
              }
            },

            labelLine: {
              show: true,
              length: 5,
              length2: 10,
            },
            data,
          },
        ],
        tooltip: {
          trigger: "item",
          show: true,
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;
  // 左右内容样式
  .view {
    flex: 1;
    &:first-child {
      margin-right: 10px;
    }
    &:last-child {
      margin-left: 10px;
    }
    ::v-deep .el-card__header {
      display: flex;
      align-items: center;
      height: 60px;
      justify-content: space-between;
    }
    .search-view {
      height: 450px;
      display: flex;
      flex-direction: column;
      // 图表
      .chart-warp {
        display: flex;
        .chart {
          flex: 1;
          &:first-child {
            margin-right: 5px;
          }
          &:last-child {
            margin-left: 5px;
          }
          .title {
            font-size: 14px;
            color: #999;
          }
          .count {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }
          // 图表
          .echarts {
            height: 50px;
            background-color: #eee;
          }
        }
      }
      // 表格
      .search-table {
        margin-top: 20px;
        flex: 1;
        .el-pagination {
          text-align: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
